<template>
    <div class="box">
        <header class="header">
            <van-nav-bar title="购物车" left-arrow @click-left="$router.go(-1)" />
        </header>
        <main class="content">
            {{ store.cartList }}
            <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
                <!-- <van-empty v-if="store.cartList.length == 0"
                    image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
                    description="购物车是空的" /> -->
                <van-skeleton v-if="store.cartList.length == 0">
                    <template #template>
                        <div :style="{ display: 'flex', width: '100%' }">
                            <van-skeleton-image />
                            <div :style="{ flex: 1, marginLeft: '16px' }">
                                <van-skeleton-paragraph row-width="60%" />
                                <van-skeleton-paragraph />
                                <van-skeleton-paragraph />
                                <van-skeleton-paragraph />
                            </div>
                        </div>
                    </template>
                </van-skeleton>

                <van-swipe-cell v-else v-for="item in store.cartList" :key="item.id">
                    <van-card :num="item.count" :price="item.price" :title="item.title" :thumb="item.image">
                        <template #tag>
                            <van-checkbox v-model="item.checked"></van-checkbox>
                        </template>
                        <template #footer>
                            <van-stepper v-model="item.count" />
                        </template>
                    </van-card>
                    <template #right>
                        <van-button square text="删除" type="danger" class="delete-button"
                            @click="store.deleteItem(item.id)" />
                    </template>
                </van-swipe-cell>
            </van-pull-refresh>

        </main>
    </div>
    <footer class="footer">
        <van-submit-bar :price="store.totalPrice * 100" button-text="提交订单" @submit="$router.push('/order')">
            <van-checkbox v-model="allChecked">全选</van-checkbox>
        </van-submit-bar>
    </footer>
</template>
<script setup>
import { useCounterStore } from '@/stores/counter'

import { computed, ref } from 'vue'
const store = useCounterStore()
const isLoading = ref(false)
const allChecked = computed({
    get() {
        // 当购物车列表为空， 全选是false
        // 购物车列表全部选中，全选是true， 只要有一个没选中，全选是false
        if (store.cartList.length == 0) {
            return false
        } else {
            return store.cartList.every(item => item.checked == true)
        }
    },
    set(newval) {
        // 当前全选按钮被点击， newval是全选按钮的最新状态
        store.cartList.forEach(item => item.checked = newval)
    }
})
const onRefresh = () => {
    setTimeout(() => {
        isLoading.value = false;
    }, 1000);
};
</script>

<style lang="scss" scoped>
.van-submit-bar {
    bottom: 50px
}

.delete-button {
    height: 100%;
}
</style>